<template>
  <a-date-picker
    v-if="disabledDateString"
    :disabled="readOnly"
    :placeholder="placeholder"
    :disabledDate="disabledDate"
    @change="handleDateChange"
    :value="momVal"
    :showTime="showTime"
    :format="dateFormat"
    :allowClear="allowClear"
    :suffixIcon=suffixIcon
    :getCalendarContainer="getCalendarContainer"
  />
  <a-date-picker
    v-else
    :disabled="readOnly"
    :placeholder="placeholder"
    @change="handleDateChange"
    :value="momVal"
    :showTime="showTime"
    :format="dateFormat"
    :allowClear="allowClear"
    :suffixIcon=suffixIcon
    :getCalendarContainer="getCalendarContainer"
  />
</template>
<script>
  import moment from 'moment'
  export default {
    name: 'JDate',
    props: {
      placeholder:{
        type: String,
        default: '',
        required: false
      },
      value:{
        type: String,
        required: false
      },
      dateFormat:{
        type: String,
        default: 'YYYY-MM-DD',
        required: false
      },
      //添加某日期前禁止选择
      //用法： <j-date v-model="arrivalTime" disabledDateString="2022-04-01"></j-date>
      disabledDateString:{
        type:String,
        required:false,
        default:''
      },
      //此属性可以被废弃了
      triggerChange:{
        type: Boolean,
        required: false,
        default: false
      },
      readOnly:{
        type: Boolean,
        required: false,
        default: false
      },
      showTime:{
        type: Boolean,
        required: false,
        default: false
      },
      allowClear:{
        type: Boolean,
        required: false,
        default: true
      },
      //是否显示日期后面的日历图标 值为" " 的时候不显示图标
      suffixIcon:{
        type:String,
        required:false,
        default:''
      },
      getCalendarContainer: {
        type: Function,
        default: () => document.body
      }
    },
    data () {
      let dateStr = this.value;
      return {
        decorator:"",
        momVal:!dateStr?null:moment(dateStr,this.dateFormat)
      }
    },
    watch: {
      value (val) {
        if(!val){
          this.momVal = null
        }else{
          this.momVal = moment(val,this.dateFormat)
        }
      }
    },
    methods: {
      moment,
      handleDateChange(mom,dateStr){
        this.$emit('change', dateStr);
      },
      disabledDate(Value) {
        const endString = this.disabledDateString
        const endTime = moment(endString)

        const startTime = moment(Value.format('YYYY-MM-DD'))
        if (!endTime || !startTime) {
          return false
        }
        return startTime.valueOf() < endTime.valueOf()
      },
    },
    //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>
